<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="res/js/api.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css"
    />
    <script src="https://cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.min.js"></script>
    <title>CDS</title>
  </head>

  <body>
    <style>
      .font-white.mdui-color-blue {
        color: #fff !important;
      }
      body {
        background-color: #fbfbfc;
      }
      .mdui-appbar {
        color: #fff;
        background-color: #fff;
      }
      .jump-list {
        display: flex;
        flex-wrap: wrap;
        margin-left: 15px;
        margin-top: 30px;
      }
      .jump-list-item {
        width: 350px;
        margin-right: 30px;
        margin-bottom: 30px;
      }
      .jump-list-item .el-card {
        height: 100%;
        box-shadow: 0 3px 6px rgba(11, 33, 74, 0.09),
          0 -2px 2px rgba(11, 33, 74, 0.03);
      }
      .el-card:hover {
        transform: scale(1.02);
      }
      .el-tag:not(:last-child) {
        margin-right: 10px;
      }
      .el-tag {
        cursor: pointer;
        margin-bottom: 15px;
      }
    </style>
    <div id="app">
      <template>
        <div class="mdui-appbar">
          <div class="mdui-toolbar mdui-color-theme">
            <span class="mdui-typo-title">CDS</span>
            <div class="mdui-toolbar-spacer"></div>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple"
              ><i class="mdui-icon material-icons">refresh</i></a
            >
            <a href="user.html" class="mdui-btn mdui-btn-icon mdui-ripple"
              ><i class="mdui-icon material-icons">person</i></a
            >
            <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple"
              ><i class="mdui-icon material-icons">more_vert</i></a
            >
          </div>
        </div>
        <!-- <div class="content" style="padding: 15px;">
          <a
            href="cds.html"
            class="mdui-btn mdui-btn-raised mdui-color-blue mdui-ripple font-white"
            >data sync</a
          >
        </div> -->
        <div class="jump-list">
          <div
            class="jump-list-item"
            v-for="(item, index) in jumpList"
            :key="index"
            @click="jump(item.url)"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
              </div>
              <template v-if="item.envList">
                <el-tag
                  v-for="(env, i) in item.envList"
                  :key="i"
                  @click="jump(env.url)"
                  >{{ env.title }}</el-tag
                >
              </template>
              <div class="describe"></div>
            </el-card>
          </div>
        </div>
      </template>
    </div>
    <script>
      const devJumpList = [
        {
          name: "Data Sync",
          url: "/cds.html",
        },
        {
          name: "CD",
          url: "#",
        },
        {
          name: "canal admin",
          url: "http://localhost:8089/",
        },
        {
          name: "clickhouse 环境一致性检测",
          url: "",
        },
        {
          name: "kafka monitor",
          envList: [
            {
              title: "dev Env",
              url: "",
            },
            {
              title: "dev connect UI",
              url: "",
            },
          ],
        },
        {
          name: "k8s dashboard",
          url:
            "",
        },
        {
          name: "用户管理",
          url: "/userManage.html",
        },
      ];
      let jumpList = [];
      switch (window.location.host) {
        default:
          jumpList = devJumpList;
          break;
      }
      app = new Vue({
        el: "#app",
        data: {
          jumpList,
        },
        methods: {
          jump(url) {
            url && window.open(url);
            // window.location.href = url;
            // window.open(url);
          },
        },
      });
    </script>
  </body>
</html>
